<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>添加用户</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../css/scroll-bar.css">
    <link rel="stylesheet" href="../css/sub-page.css">
    <link rel="stylesheet" href="../css/font.css">
</head>

<body>
    <div class="ok-body">
        <!--面包屑导航区域-->
        <div class="ok-body-breadcrumb">
            <span class="layui-breadcrumb">
                <a><cite>首页</cite></a>
                <a><cite>任务管理</cite></a>
                <a><cite>流程设置</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" href="javascript:location.replace(location.href);" title="刷新">
                <i class="layui-icon layui-icon-refresh"></i>
            </a>
        </div>

        <div class="layui-tab" lay-filter="nav">
            <ul class="layui-tab-title">
                <li lay-id="2">流程设置</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <form class="layui-form" lay-filter="usersetting">
                        <!-- <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                            <legend>流程配置</legend>
                        </fieldset> -->
                        <div class="layui-form-item">
                            <fieldset class="layui-elem-field site-demo-button">
                                <label class="layui-form-label">流程</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" name="mark" title="标注" value="0" lay-filter="switch_mark">
                                    <input type="checkbox" name="inspect" title="检查" value="1" lay-filter="switch_inspect">
                                    <input type="checkbox" name="rndinspect" title="抽查" value="2" lay-filter="switch_rndinspect">
                                    <input type="checkbox" name="accept" title="验收" value="3" lay-filter="switch_accept">
                                </div>
                            </fieldset>
                        </div>

                        <div id="flow">
                            <fieldset class="layui-elem-field site-demo-button layui-hide" id="mark">
                                <legend>标注用户<a class="layui-btn layui-btn-warm layui-btn-xs"><i class="layui-icon useradd"
                                            data='mark'>添加</i></a></legend>

                                <!-- <div class="layui-btn-group" style="margin:10px;" >
                                    <a class="layui-btn layui-btn-primary layui-btn-xs"><i class="layui-icon">jack</i></a>
                                    <a class="layui-btn layui-btn-primary layui-btn-xs"><i class="layui-icon"></i></a>
                                </div> -->
                            </fieldset>

                            <fieldset class="layui-elem-field site-demo-button layui-hide" id="inspect">
                                <legend>检查用户<a class="layui-btn layui-btn-warm layui-btn-xs"><i class="layui-icon useradd"
                                            data='inspect'>添加</i></a></legend>

                            </fieldset>

                            <fieldset class="layui-elem-field site-demo-button layui-hide" id="rndinspect">
                                <legend>抽查用户 <a class="layui-btn layui-btn-warm layui-btn-xs"><i class="layui-icon useradd"
                                            data="rndinspect">添加</i></a>
                                </legend>

                            </fieldset>

                            <fieldset class="layui-elem-field site-demo-button layui-hide" id="accept">
                                <legend>验收用户<a class="layui-btn layui-btn-warm layui-btn-xs"><i class="layui-icon useradd"
                                            data="accept">添加</i></a></legend>

                            </fieldset>
                        </div>

                    </form>
                    <button class="layui-btn" id="flowsetting_next">提交数据</button>

                </div>
            </div>
        </div>
    </div>
    <input class="layui-hide" id='id' value="">
    <!--js逻辑-->
    <script src="../lib/layui/layui.js"></script>
    <script src="../lib/laymd/marked.min.js"></script>
    <script>
        var jquery;

        var taskobj = {
            markobj: {
                enable: 0,
                users: []
            }, //标注
            inspectobj: {
                enable: 0,
                users: []
            }, //检查
            rndinspectobj: {
                enable: 0,
                users: []
            }, //抽查
            acceptobj: {
                enable: 0,
                users: []
            } //验收           
        }; //新任务对象

        layui.use(['element', 'jquery', 'form'], function () {
            var element = layui.element;
            jquery = layui.jquery;
            var $ = layui.jquery;
            var form = layui.form;

            

            //流程设置
            $("#flowsetting_next").click(function () {
                var valited = valitedFlowsetting();
                //alert(valited);
                if (valited) {
                    taskobj.configid = $('#id').val(); //流程ID
                    //提交修改
                    //layer.alert(JSON.stringify(taskobj));
                    $.ajax({
                        url: '/task/flowupdate',
                        method: 'post',
                        data: {params:JSON.stringify(taskobj)},     
                        dataType: 'JSON',
                        success: function (res) {
                            if (res.code == 1) {
                                layer.msg('操作成功');
                                parent.layer.close(parent.layer.getFrameIndex(window.name));
                            } else {
                                layer.msg('操作失败');
                            }
                        },
                        error: function (data) {}
                    })
                }


            });

            //检验流程设置是否有效
            function valitedFlowsetting() {
                var f1 = false,
                    f2 = false,
                    f3 = false,
                    f4 = false;
                if (taskobj.markobj.enable == 0 && taskobj.inspectobj.enable == 0 && taskobj.rndinspectobj.enable ==
                    0 && taskobj.acceptobj.enable == 0) {
                    layer.alert('请启用合适的流程');
                    return false;
                }

                if (taskobj.markobj.enable == 1) {
                    if (taskobj.markobj.users.length == 0) {
                        layer.alert('请选择标注用户');
                        return false;
                    } else {
                        f1 = true;
                    }

                } else {
                    f1 = true;
                }

                if (taskobj.inspectobj.enable == 1) {
                    if (taskobj.inspectobj.users.length == 0) {
                        layer.alert('请选择检查用户');
                        return false;
                    } else {
                        f2 = true;
                    }
                } else {
                    f2 = true;
                }
                if (taskobj.rndinspectobj.enable == 1) {
                    if (taskobj.rndinspectobj.users.length == 0) {
                        layer.alert('请选择抽查用户');
                        return false;
                    } else {
                        f3 = true;
                    }
                } else {
                    f3 = true;
                }

                if (taskobj.acceptobj.enable == 1) {
                    if (taskobj.acceptobj.users.length == 0) {
                        layer.alert('请选择验收用户');
                        return false;
                    } else {
                        f4 = true;
                    }
                } else {
                    f4 = true;
                }

                if (f1 && f2 && f3 && f4) {
                    return true;
                } else {
                    return false;
                }
            }


            //监听指定开关
            form.on('checkbox(switch_mark)', function (data) {
                if (this.checked) {
                    $('#flow fieldset').eq(data.value).removeClass('layui-hide');
                    taskobj.markobj.enable = 1;
                } else {
                    $('#flow fieldset').eq(data.value).addClass('layui-hide');
                    taskobj.markobj.enable = 0;
                }
            });
            form.on('checkbox(switch_inspect)', function (data) {
                if (this.checked) {
                    $('#flow fieldset').eq(data.value).removeClass('layui-hide');
                    taskobj.inspectobj.enable = 1;
                } else {
                    $('#flow fieldset').eq(data.value).addClass('layui-hide');
                    taskobj.inspectobj.enable = 0;
                }
            });
            form.on('checkbox(switch_rndinspect)', function (data) {
                if (this.checked) {
                    $('#flow fieldset').eq(data.value).removeClass('layui-hide');
                    taskobj.rndinspectobj.enable = 1;
                } else {
                    $('#flow fieldset').eq(data.value).addClass('layui-hide');
                    taskobj.rndinspectobj.enable = 0;
                }
            });
            form.on('checkbox(switch_accept)', function (data) {
                if (this.checked) {
                    $('#flow fieldset').eq(data.value).removeClass('layui-hide');
                    taskobj.acceptobj.enable = 1;
                } else {
                    $('#flow fieldset').eq(data.value).addClass('layui-hide');
                    taskobj.acceptobj.enable = 0;
                }
            });

            $('.useradd').click(function () {
                var data = $(this).attr('data');
                console.log(data);
                //layer.alert(data);
                layer.open({
                    title: '用户列表',
                    type: 2,
                    shade: false,
                    maxmin: true,
                    shade: 0.5,
                    area: ['90%', '90%'],
                    content: '/task/users',
                    zIndex: layer.zIndex,
                    end: function () {
                        //$(".layui-laypage-btn")[0].click();
                    },
                    success: function (layero, index) {
                        var body = layer.getChildFrame('body', index);
                        var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                        body.find('#id').val(data);
                        console.log(body.find('#id').val());
                    }
                });
            });

            $('#flow').on('click', '.delete', function () {
                // console.log($(this).attr('data-id'));
                // console.log($(this).attr('data-target'));
                var userid = $(this).attr('data-id');
                var elem = $(this).attr('data-target');
                var selector = elem + userid;
                $('#' + selector).remove();
                removeusers(elem, userid);
                print();
            });

            /* var data = <%=data.mark%>;
            console.log(data); */

            //表单初始赋值
            form.val('usersetting', {
                "mark": <%=data.mark%>,
                "inspect": <%=data.inspect%>,
                "rndinspect": <%=data.rndinspect%>,
                "accept": <%=data.accept%>
            });

            var users = [];



            users = <%- users%>;
            console.log(users);

            var markusers = '<%=data.markusers%>';
            var inspectusers = '<%=data.inspectusers%>';
            var rndinspectusers = '<%=data.rndinspectusers%>';
            var acceptusers = '<%=data.acceptusers%>';

            var markarray = markusers.split(',');
            var inspectarray = inspectusers.split(',');
            var rndinspectarray = rndinspectusers.split(',');
            var accpetarray = acceptusers.split(',');
            bindui(markarray, 'mark');
            bindui(inspectarray, 'inspect');
            bindui(rndinspectarray, 'rndinspect');
            bindui(accpetarray, 'accept');



            function bindui(userids, selector) {

                if (userids && userids.length > 0 && userids[0] != '') {
                    var current_users = [];

                    for (var i = 0; i < userids.length; i++) {
                        var userid = userids[i];
                        for (var j = 0; j < users.length; j++) {
                            if (userid === users[j].userid) {
                                current_users.push(users[j]);
                                break;
                            }
                        }
                    }
                    console.log('-----------------------------');
                    console.log(current_users);
                    console.log(selector);
                    rendselectedusers(current_users, selector);

                    switch (selector) {
                        case 'mark':
                            if (userids || userids.length > 0) {
                                $('#flow fieldset').eq(0).removeClass('layui-hide');
                                taskobj.markobj.enable = 1;
                            } else {
                                $('#flow fieldset').eq(0).addClass('layui-hide');
                                taskobj.markobj.enable = 0;
                            }
                            break;

                        case 'inspect':
                            if (userids || userids.length > 0) {
                                $('#flow fieldset').eq(1).removeClass('layui-hide');
                                taskobj.inspectobj.enable = 1;
                            } else {
                                $('#flow fieldset').eq(1).addClass('layui-hide');
                                taskobj.inspectobj.enable = 0;
                            }
                            break;
                        case 'rndinspect':
                            if (userids || userids.length > 0) {
                                $('#flow fieldset').eq(2).removeClass('layui-hide');
                                taskobj.rndinspectobj.enable = 1;
                            } else {
                                $('#flow fieldset').eq(2).addClass('layui-hide');
                                taskobj.rndinspectobj.enable = 0;
                            }
                            break;
                        case 'accept':
                            if (userids || userids.length > 0) {
                                $('#flow fieldset').eq(3).removeClass('layui-hide');
                                taskobj.acceptobj.enable = 1;
                            } else {
                                $('#flow fieldset').eq(3).addClass('layui-hide');
                                taskobj.acceptobj.enable = 0;
                            }
                            break;
                        default:
                            break;
                    }
                }
            }
        })

        function rendselectedusers(users, selector) {
            //console.log(users);
            users.forEach(u => {
                setUsersArray(selector, u);
            });
            print();
        }
        var mark = [],
            inspect = [],
            rndinspect = [],
            accept = []; //选择的用户集合
        function setUsersArray(arrayname, user) {
            switch (arrayname) {
                case 'mark':
                    var index = mark.indexOf(user.userid);
                    if (index == -1) {
                        mark.push(user.userid);
                        rendui(arrayname, user);
                    }
                    break;
                case 'inspect':
                    var index = inspect.indexOf(user.userid);
                    if (index == -1) {
                        inspect.push(user.userid);
                        rendui(arrayname, user);
                    }
                    break;
                case 'rndinspect':
                    var index = rndinspect.indexOf(user.userid);
                    if (index == -1) {
                        rndinspect.push(user.userid);
                        rendui(arrayname, user);
                    }
                    break;
                case 'accept':
                    var index = accept.indexOf(user.userid);
                    if (index == -1) {
                        accept.push(user.userid);
                        rendui(arrayname, user);
                    }
                    break;
                default:
                    break;
            }
        }

        function removeusers(arrayname, value) {
            switch (arrayname) {
                case 'mark':
                    var index = mark.indexOf(value);
                    if (index > -1) {
                        mark.splice(index, 1);
                    }
                    break;
                case 'inspect':
                    var index = inspect.indexOf(value);
                    if (index > -1) {
                        inspect.splice(index, 1);
                    }
                    break;
                case 'rndinspect':
                    var index = rndinspect.indexOf(value);
                    if (index > -1) {
                        rndinspect.splice(index, 1);
                    }
                    break;
                case 'accept':
                    var index = accept.indexOf(value);
                    if (index > -1) {
                        accept.splice(index, 1);
                    }
                    break;
                default:
                    break;
            }
        }

        function print() {
            console.log(mark);
            console.log(inspect);
            console.log(rndinspect);
            console.log(accept);
            taskobj.markobj.users = mark;
            taskobj.inspectobj.users = inspect;
            taskobj.rndinspectobj.users = rndinspect;
            taskobj.acceptobj.users = accept;
        }

        function rendui(selector, u) {
            jquery('#' + selector).append('<div class="layui-btn-group" style="margin:10px;" id="' +
                selector + u.userid +
                '" >' +
                '<a class="layui-btn layui-btn-primary layui-btn-xs"><i class="layui-icon">' + u.truename +
                '</i></a>' +
                '<a class="layui-btn layui-btn-primary layui-btn-xs delete" data-id="' + u.userid +
                '" data-target="' + selector + '"><i class="layui-icon"></i></a>' +
                '</div>');
        }
    </script>
</body>

</html>